<template>
  <div>
    <div ref="mapContainer" style="height: 400px;"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      customLayer: null,
    };
  },
  mounted() {
    AMapLoader.load({
      key: '679662feaf9eea69c144ec80085dc2b1',
      version: '2',
      plugins: ['AMap.CustomLayer'],
    }).then(() => {
      this.map = new AMap.Map(this.$refs.mapContainer, {
        center: [116.397428, 39.90923],
        zoom: 13,
      });

      this.addCustomLayer();
    });
  },
  methods: {
    addCustomLayer() {
      this.customLayer = new AMap.CustomLayer({
        zooms: [3, 18],
        zIndex: 100,
        render: this.renderCustomLayer.bind(this),
      });

      this.map.add(this.customLayer);
    },
    renderCustomLayer() {
      const container = document.createElement('div');
      container.style.position = 'absolute';
      container.style.width = '100%';
      container.style.height = '100%';
      
      const canvas = document.createElement('canvas');
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;

      container.appendChild(canvas);

      // 在这里进行元素的绘制，可以使用 Canvas API
      const context = canvas.getContext('2d');
      context.fillStyle = 'red';
      context.beginPath();
      context.arc(100, 100, 10, 0, 2 * Math.PI);
      context.fill();

      // 返回容器而不是画布
      return container;
    },
  },
};
</script>
